<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img {
            width: 250px;
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid red;
            /* 如果移除我的长度和高度那一部分直接隐藏 */
            overflow: hidden;
        }

        .img img {
            transition: all 0.3s ease-in-out;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="img">
            <img :src="url" :width="width" :height="height" alt="">
        </div>
        <button @click="addWidth">放大10%</button>
        <button @click="subWidth">缩小10%</button> <br>

        {{ msg }} <br>
        <input v-model="msg" type="text">
        <hr>
        {{ a }} 是
        <span v-if='a%2 == 0'>偶数</span>
        <span v-else>奇数</span>

        <!-- 三元运算符 -->
        {{ a%2 ==0 ? '偶数' : '奇数' }}

        <hr>
        姓名：{{ student.name }}
        年龄：{{ student.age }}
        性别：{{ student.sex }}

        <p>
            {{ student.name }}是
            <b v-if="student.age >= 18">成年人</b>
            <b v-else>未成年人</b>

            <!-- 三元运算符 -->
            {{ student.age >=18 ? '成年人' : '未成年人' }}
        </p>

        <hr>

    </div>

    <script src="./js/vue.global.js"></script>
    <script>
        // Vue 实例 点击放大10% 缩小10%
        const app = Vue.createApp({

            data() {
                return {
                    url: './img/t01.jpg',
                    width: 200,
                    height: 200,
                    msg: 'Hello Vue!',
                    a: 6,
                    student: {
                        name: '张三',
                        age: 18,
                        sex: '男'

                    },
                }
            },

            methods: {
                // 放大10%
                addWidth() {
                    this.width += 10
                    this.height += 10
                },
                // 缩小10%
                subWidth() {
                    this.width -= 10
                    this.height -= 10
                }
            },

        }).mount('#app')
    </script>
</body>

</html>